<!doctype html>
<html lang="zh-CN">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
    <meta content="webkit" name="renderer">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <title>人人影视</title>
    <!-- Template CSS -->
    <link rel="stylesheet" th:href="@{/static/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/static/css/style-starter.css}">
    <script th:src="@{/static/layui.js}"></script>
    <link rel="stylesheet" th:href="@{/static/css/xcConfirm.css}" type="text/css"/>
    <link rel="stylesheet" th:href="@{/static/css/font-awesome.min.css}" type="text/css"/>
    <!--
        <link rel="stylesheet" th:href="@{/static/css/layui.css}">
    -->
    <link rel="stylesheet" th:href="@{/static/css/style2.css}"/>
    <link rel="stylesheet" th:href="@{/static/css/flexslider.css}"/>

    <style>

        li {
            list-style-type: none;
        }

        .mydiv:hover {
            width: 250px;
            height: auto;
            border: #909090 1px solid;
            background: #fff;
            color: #333;
            filter: progid:DXImageTransform.Microsoft.Shadow(color=#909090,
            direction=120, strength=4);
            -moz-box-shadow: 2px 2px 10px #909090;
            -webkit-box-shadow: 2px 2px 10px #909090;
            box-shadow: 2px 2px 10px #909090;
        }

        a {
            cursor: pointer;
            text-decoration: none;
        }

        a:link, a:visited {
            text-decoration: none; /*超链接无下划线*/
        }
    </style>
</head>

<body>

<!-- header -->
<header class="w3l-header fixed-top" id="site-header">
    <!--/nav-->
    <nav class="navbar navbar-expand-lg navbar-light fill px-lg-0 py-0 px-3">
        <div class="container">
            <h1>
                <a class="navbar-brand" href="#">
                    人人影视 </a>
            </h1>
            <button aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"
                    class="navbar-toggler collapsed" data-target="#navbarSupportedContent" data-toggle="collapse"
                    type="button">
                <!-- <span class="navbar-toggler-icon"></span> -->
                <span class="fa icon-expand fa-bars"></span>
                <span class="fa icon-close fa-times"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active">
                        <a class="nav-link" th:href="@{/user/toIndex}">主页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="about.html">关于我们</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="contact.html">联系我们</a>
                    </li>
                </ul>

                <!--/search-right-->
                <!--/search-right-->
                <div class="search-right">
                    <a class="btn search-hny mr-lg-3 mt-lg-0 mt-4" href="#search" title="search">搜索<span
                            aria-hidden="true" class="fa fa-search ml-3"></span></a>
                    <!-- search popup -->
                    <div class="pop-overlay" id="search">
                        <div class="popup">
                            <form class="search-box" method="post" th:action="@{/video/search}">
                                <input autofocus="" name="videoTitle" placeholder="Search your Keyword"
                                       required="required" type="search">
                                <button class="btn" type="submit"><span aria-hidden="true"
                                                                        class="fa fa-search"></span></button>
                            </form>
                            <div class="browse-items">
                                <h3 class="hny-title two mt-md-5 mt-4">人人影视搜索</h3>
                                <ul class="search-items">
                                    <li><a href="#">影视</a></li>
                                    <li><a href="#">新闻</a></li>
                                    <li><a href="#">生活</a></li>
                                    <li><a href="#">美食</a></li>
                                    <li><a href="#">音乐</a></li>
                                    <li><a href="#">电视剧</a></li>
                                    <li><a href="#">舞蹈</a></li>
                                    <li><a href="#">动漫</a></li>
                                    <li><a href="#">娱乐</a></li>
                                    <li><a href="#">科技数码</a></li>
                                    <li><a href="#">体育</a></li>
                                    <li><a href="#">美妆</a></li>
                                </ul>
                            </div>
                        </div>
                        <a class="close" href="#close">×</a>
                    </div>
                    <!-- /search popup -->
                    <!--/search-right-->
                </div>


            </div>
            <!-- toggle switch for light and dark theme -->
            <div class="mobile-position">
                <nav class="navigation">
                    <div class="theme-switch-wrapper">
                        <label class="theme-switch" for="checkbox">
                            <input id="checkbox" type="checkbox">
                            <div class="mode-container">
                                <i class="gg-sun"></i>
                                <i class="gg-moon"></i>
                            </div>
                        </label>
                    </div>
                </nav>
            </div>
            <!-- //toggle switch for light and dark theme -->
            <!--<button type="button" class="btn btn-primary btn-lg active">登录</button>-->
            <div th:unless="${session.user}">
                <a class="btn btn-primary btn-lg" style="height: 38px;font-size: 14px;"
                   th:href="@{/user/toLogin}">登录</a>
            </div>
            <div th:if="${session.user}">
                <button class="layui-btn layui-btn-primary" id="demo4">
                    <span th:text="${session.user.userName}"></span>
                    <i class="layui-icon layui-icon-more-vertical layui-font-12">
                    </i>
                </button>
            </div>
        </div>
    </nav>
    <!--//nav-->
</header>
<!-- //header -->

<section style="margin-top: 80px;">
    <div class="navbar-collapse collapse" id="defaultmenu">
        <ul style="margin-left: 160px">
            <li data-toggle="tab" style="float: left">
                <div style="background-color: gray;font-size: 20px;width: 100px;height: 40px;vertical-align:middle;text-align:center;">
                    <a href="#" id="collectionButton" style="vertical-align: middle;text-align:center;">收藏</a></div>
            </li>
            <li data-toggle="tab" style="float: left">
                <div style="background-color: grey;font-size: 20px;width: 100px;height: 40px;vertical-align:middle;text-align:center;">
                    <a href="#" id="recordButton" style="vertical-align: middle;text-align:center;">播放记录</a></div>
            </li>
            <li data-toggle="tab" style="float: left">
                <div style="background-color: grey;font-size: 20px;width: 100px;height: 40px;vertical-align:middle;text-align:center;">
                    <a href="#" id="fdVideoButton" style="vertical-align: middle;text-align:center;">好友</a></div>
            </li>
            <li data-toggle="tab" style="float: left">
                <div style="background-color: grey;font-size: 20px;width: 100px;height: 40px;vertical-align:middle;text-align:center;">
                </div>
            </li>
            <li data-toggle="tab" style="float: left">
                <div style="background-color: grey;font-size: 20px;width: 100px;height: 40px;vertical-align:middle;text-align:center;">
                </div>
            </li>
            <li data-toggle="tab" style="float: left">
                <div style="background-color: grey;font-size: 20px;width: 100px;height: 40px;vertical-align:middle;text-align:center;">
                </div>
            </li>
            <li data-toggle="tab" style="float: left">
                <div style="background-color: grey;font-size: 20px;width: 100px;height: 40px;vertical-align:middle;text-align:center;">
                </div>
            </li>
            <li data-toggle="tab" style="float: left">
                <div style="background-color: grey;font-size: 20px;width: 100px;height: 40px;vertical-align:middle;text-align:center;">
                </div>
            </li>
            <li data-toggle="tab" style="float: left">
                <div style="background-color: grey;font-size: 20px;width: 100px;height: 40px;vertical-align:middle;text-align:center;">
                </div>
            </li>
            <li data-toggle="tab" style="float: left">
                <div style="background-color: grey;font-size: 20px;width: 100px;height: 40px;vertical-align:middle;text-align:center;">
                </div>
            </li>
            <li data-toggle="tab" style="float: left">
                <div style="background-color: grey;font-size: 20px;width: 100px;height: 40px;vertical-align:middle;text-align:center;">
                </div>
            </li>
            <li data-toggle="tab" style="float: left">
                <div style="background-color: grey;font-size: 20px;width: 100px;height: 40px;vertical-align:middle;text-align:center;">
                </div>
            </li>

        </ul>
    </div>


    <!--播放记录-->
    <div class="container row p_card" id="record"></div>
    <!--收藏-->
    <div class="container row p_card" id="collection">
        <h1>视频中心</h1>
    </div>
    <div class="container row p_card" id="fdVideoPage">
        <div class="container-fluid col-lg-3 left_col" id="friendsList">
        </div>
        <div class="container-fluid col-lg-8 right_col" id="fdvideo">
            <div>
                <h1 style="text-align: center;position:relative; top:40px;">点击左边用户，显示视频！</h1>
            </div>
        </div>
    </div>

</section>
</body>

</html>
<script th:src="@{/static/js/jquery.min.js}"></script>
<script th:src="@{/static/js/bootstrap.min.js}"></script>
<script charset="utf-8" th:src="@{/static/js/xcConfirm.js}" type="text/javascript"></script>
<script th:src="@{/static/js/common.js}"></script>

<script type="text/javascript">
    var record_signal = false;
    var collection_signal = false;
    var fdVideo_signal = false;

    function operateAjax(url, videoId) {
        $.ajax({
            url: url,
            async: true,
            type: "post",
            data: {
                "videoId": videoId
            },
            dataType: "JSON",
            error: function () {
                window.wxc.xcConfirm("操作失败", window.wxc.xcConfirm.typeEnum.error);
            },
            success: function (data) {
                window.wxc.xcConfirm("操作成功", window.wxc.xcConfirm.typeEnum.success);
            }
        });
    }

    function myAjax(url, idName, id_identify_prefix, type) {
        $.ajax({
            url: url,
            async: true,
            type: "get",
            dataType: "JSON",
            error: function () {
                window.wxc.xcConfirm("操作失败", window.wxc.xcConfirm.typeEnum.success);
            },
            success: function (data) {
                $.each(data.data, function (i, val) {
                    var div1 = $('<div id="videoId' + id_identify_prefix + val.videoId + '" style="margin-bottom:40px;" class="col-lg-3 "/>');

                    var ul = $('<ul style="padding:0;margin:0;"/>');
                    ul.appendTo(div1);
                    var li = $('<li style="margin:0;"/>');
                    li.appendTo(ul);

                    var div2 = $('<div class="card mydiv" style="width:100%; border: rgba(0,0,0,.125) solid 1px ;"/>');
                    div2.appendTo(li);

                    var div21 = $('<div class="C_img" style="width:100%;"/>');
                    div21.appendTo(div2);

                    var img = $('<img style="width:100%;" class="absoImg" alt=""/>');
                    img.appendTo(div21);

                    img.attr("src", this.thunmbnailUrl);

                    var div22 = $('<div class="container-fluid" style="padding:2px 5px;"/>');
                    div22.appendTo(div2);

                    var h4 = $('<h4 class="title" style="font-weight:bold;margin:3px;"/>');
                    h4.appendTo(div22);
                    h4.html(this.videoTitle);

                    var p = $('<p class="desc"/>');
                    p.appendTo(div22);
                    p.html("简述：" + this.videoInfo.substring(0, 10) + "...");

                    var div221 = $('<div class="containe-fluidr" style="padding:8px 0 ;"/>');
                    div221.appendTo(div22);

                    var div2211 = $('<div class="" style="float:left;"/>');
                    div2211.appendTo(div221);
                    div2211.html("状态：" + this.videoState.stateName);

                    var div2212 = $('<div class="dropup " style="float:right; border: rgba(0,0,0,.125) solid 1px;margin:0 0 4px 0;">');
                    div2212.appendTo(div221);

                    var button = $(' <a  class="dropdown-toggle" data-toggle="dropdown" />');
                    button.appendTo(div2212);
                    button.html('<div style="margin:4px 0;padding:2px 10px;cursor: pointer;text-decoration: none;">operate</div>');
                    //操作下拉框
                    var ul1 = $(' <ul class="dropdown-menu" role="menu" aria-labelledby="menu1"/>');
                    ul1.appendTo(div2212);


                    //删除收藏
                    var li16 = $('<li role="presentation"/>');
                    var a6 = $('<a role="menuitem" tabindex="-1" />');

                    //删除记录
                    var li17 = $('<li role="presentation"/>');
                    var a7 = $('<a role="menuitem" tabindex="-1" />');

                    if (type == "collection") {

                        var date = (new Date(this.editDate)).Format("yyyy-MM-dd hh:mm:ss");
                        div2211.html("日期：" + date);
                        li16.appendTo(ul1);
                        a6.html("删除收藏");
                        a6.appendTo(li16);
                    } else if (type == "record") {
                        var date = (new Date(this.editDate)).Format("yyyy-MM-dd hh:mm:ss");
                        div2211.html("日期：" + date);
                        li17.appendTo(ul1);

                        a7.html("删除记录");
                        a7.appendTo(li17);
                    } else {
                        //window.wxc.xcConfirm("添加操作失败", window.wxc.xcConfirm.typeEnum.error);
                    }

                    div1.appendTo(idName);

                    a6.click(function (div1) {
                        //alert("删除"+val.videoId);
                        var id = '#videoId' + id_identify_prefix + val.videoId;
                        $(id).remove();
                        operateAjax("/collection/deleteCollection", val.videoId);

                    });

                    a7.click(function (div1) {
                        //alert("删除"+val.videoId);
                        var id = '#videoId' + id_identify_prefix + val.videoId;
                        $(id).remove();
                        operateAjax("/record/removeRecord", val.videoId);
                    });

                    img.click(function () {
                        window.open("/video/videoPlay?videoId=" + val.videoId);
                    });
                });
            }
        })
    }

    $("#collectionButton").click(function () {
        $("#collection").show();
        $("#fdVideoPage").hide();
        $('#record').hide();
        if (collection_signal != true) {
            $('#collection').empty();
            myAjax("/collection/getAllCollection", "#collection", "collection", "collection");
            collection_signal = true;
        }
    });

    $("#recordButton").click(function () {
        $("#record").show();
        $("#fdVideoPage").hide();
        $('#collection').hide();
        if (record_signal != true) {
            $('#record').empty();
            myAjax("/record/getAllRecord", "#record", "record", "record");
            record_signal = true;
        }
    });

    /*好友*/
    function myFriends(url, idName, id_identify_prefix, type) {
        $.ajax({
            url: url,
            async: true,
            type: "get",
            dataType: "JSON",
            error: function () {
                alert("失败2");
            },
            success: function (data) {
                $.each(data.data, function (i, val) {

                    var userId = this.userId;
                    var fdId = id_identify_prefix + this.userId;

                    var div0 = $('<div class="container-fluid fd_class" id="' + fdId + '" style=" border: rgba(0,0,0,.125) solid 1px; padding:3px 8px; margin:4px 0px;"/>');

                    var div01 = $('<div style="position:relative; float:left; display: flex;flex-direction:row; " />');
                    div01.appendTo(div0);

                    var img = $('<img  style="width:40px; height:40px; border-radius:50%;"/>');
                    img.attr("src", this.iconUrl);
                    img.appendTo(div01);

                    var div011 = $('<div style="position:relative; left:8px; top: 4px;"/>');
                    div011.appendTo(div01);

                    var div0111 = $('<div style="font-size: 15px;" />');
                    div0111.appendTo(div011);
                    div0111.html(this.userName);

                    var div0112 = $('<div style="font-size: 10px;" />');
                    div0112.appendTo(div011);
                    var date = (new Date(this.registerDate)).Format("yyyy-MM-dd hh:mm:ss");
                    div0112.html(date);

                    var div02 = $('<div style="color:#007dd3; position:relative; float:right;top: 4px; margin:4px 0;padding:2px 10px;cursor: pointer;text-decoration: none;"/>');
                    div02.html("取消关注");
                    div02.appendTo(div0);

                    div02.click(
                        function () {
                            window.wxc.xcConfirm("本系统暂不支持该功能", window.wxc.xcConfirm.typeEnum.warning);
                        }
                    );

                    div0.appendTo($('#friendsList'));

                    $('#' + fdId).click(
                        function () {
                            $("#fdvideo").empty();
                            myAjax2("/video/getVideoListByUserId", "#fdvideo", "fdvideo", null, userId);
                        }
                    );

                });
            }
        })
    }

    /*用户的视频*/
    function myAjax2(url, idName, id_identify_prefix, type, parameter) {
        $.ajax({
            url: url,
            async: true,
            type: "get",
            data: {"userId": parameter},
            dataType: "JSON",
            error: function () {
                alert("失败2");
            },
            success: function (data) {
                $.each(data.data, function (i, val) {
                    var div1 = $('<div id="videoId' + id_identify_prefix + val.videoId + '" style="margin-bottom:40px;" class="col-lg-4 "/>');

                    var ul = $('<ul style="padding:0;margin:0;"/>');
                    ul.appendTo(div1);

                    var li = $('<li style="margin:0;"/>');
                    li.appendTo(ul);

                    var div2 = $('<div class="card mydiv" style="width:100%; border: rgba(0,0,0,.125) solid 1px ;"/>');
                    div2.appendTo(li);

                    var li0 = $('<li style="margin:4px 0;"/>');
                    li0.appendTo(div2);


                    var div21 = $('<div class="C_img" style="width:100%;"/>');
                    div21.appendTo(div2);

                    var img = $('<img style="width:100%;" class="absoImg" alt=""/>');
                    img.appendTo(div21);
                    img.attr("src", this.thunmbnailUrl);

                    var div22 = $('<div class="container-fluid" style="padding:2px 5px;"/>');
                    div22.appendTo(div2);

                    var h4 = $('<h4 class="title"/>');
                    h4.appendTo(div22);
                    h4.html("主题：" + this.videoTitle);

                    var p = $('<p class="desc"/>');
                    p.appendTo(div22);
                    p.html("描述：" + this.videoInfo.substring(0, 17) + "...");

                    var div221 = $('<div class="containe-fluidr" style="padding:8px 0 ;"/>');
                    div221.appendTo(div22);

                    var div2211 = $('<div class="" style="float:left;"/>');
                    div2211.appendTo(div221);
                    var date = (new Date(this.editDate)).Format("yyyy-MM-dd hh:mm:ss");
                    div2211.html("日期：" + date);

                    var div2212 = $('<div class="dropup " style="float:right; border: rgba(0,0,0,.125) solid 1px;margin:0 0 4px 0;">');
                    div2212.appendTo(div221);


                    //操作下拉框
                    var ul1 = $(' <ul class="dropdown-menu" role="menu" aria-labelledby="menu1"/>');
                    ul1.appendTo(div2212);

                    div1.appendTo(idName);

                    img.click(function () {
                        window.open("/VideoController/videoPlay?videoId=" + val.videoId);
                    });
                });
            }
        })
    }


    $("#fdVideoButton").click(function () {
            $("#fdVideoPage").show();
            $("#record").hide()
            $('#collection').hide();
            if (fdVideo_signal == false) {
                myFriends("/focus/focusedList", '#friendsList', 'fd', null)
                fdVideo_signal = true;
            }
        }
    );
</script>
<script th:src="@{/static/js/easyResponsiveTabs.js}"></script>
<script type="text/javascript">
    $(document).ready(function () {
        //Horizontal Tab
        $('#parentHorizontalTab').easyResponsiveTabs({
            type: 'default', //Types: default, vertical, accordion
            width: 'auto', //auto or any width like 600px
            fit: true, // 100% fit in a container
            tabidentify: 'hor_1', // The tab groups identifier
            activate: function (event) { // Callback function if tab is switched
                var $tab = $(this);
                var $info = $('#nested-tabInfo');
                var $name = $('span', $info);
                $name.text($tab.text());
                $info.show();
            }
        });
    });
</script>
<!-- //responsive tabs -->
<!--/theme-change-->
<script th:src="@{/static/js/theme-change.js}"></script>
<!-- //theme-change-->
<!-- script for owlcarousel -->
<!-- Template JavaScript -->
<script th:src="@{/static/js/jquery.magnific-popup.min.js}"></script>



